<template>
  <div class="test-flv-page">
    <div class="header">
      <h2>智慧社区视频云监控中心</h2>
      <p class="desc">实时监控多路高清摄像头视频信号，保障社区安全</p>
    </div>
    <div class="video-grid">
      <!-- 第一个窗口 -->
      <div class="video-box">
        <div class="video-title">
          <span class="camera-icon">📹</span> 监控画面1
        </div>
        <div class="video-container">
          <video ref="videoRef1" class="test-video" controls autoplay playsinline muted></video>
          <div v-if="loading1" class="loading-overlay">
            <div class="loading-spinner"></div>
            <div>加载中...</div>
          </div>
        </div>
        <div class="status-info">
          <span :class="statusClass1">● {{ statusText1 }}</span>
        </div>
        <div class="btn-row">
          <button @click="reload1" class="reload-btn">
            <span class="btn-icon">🔄</span> 重新加载
          </button>
          <button @click="toggleFullscreen(videoRef1)" class="fullscreen-btn">
            <span class="btn-icon">⛶</span> 全屏
          </button>
        </div>
      </div>
      <!-- 第二个窗口 -->
      <div class="video-box">
        <div class="video-title">
          <span class="camera-icon">📹</span> 监控画面2
        </div>
        <div class="video-container">
          <video ref="videoRef2" class="test-video" controls autoplay playsinline muted></video>
          <div v-if="loading2" class="loading-overlay">
            <div class="loading-spinner"></div>
            <div>加载中...</div>
          </div>
        </div>
        <div class="status-info">
          <span :class="statusClass2">● {{ statusText2 }}</span>
        </div>
        <div class="btn-row">
          <button @click="reload2" class="reload-btn">
            <span class="btn-icon">🔄</span> 重新加载
          </button>
          <button @click="toggleFullscreen(videoRef2)" class="fullscreen-btn">
            <span class="btn-icon">⛶</span> 全屏
          </button>
        </div>
      </div>
      <!-- 第三个窗口 -->
      <div class="video-box">
        <div class="video-title">
          <span class="camera-icon">📹</span> 监控画面3
        </div>
        <div class="video-container">
          <video ref="videoRef3" class="test-video" controls autoplay playsinline muted></video>
          <div v-if="loading3" class="loading-overlay">
            <div class="loading-spinner"></div>
            <div>加载中...</div>
          </div>
        </div>
        <div class="status-info">
          <span :class="statusClass3">● {{ statusText3 }}</span>
        </div>
        <div class="btn-row">
          <button @click="reload3" class="reload-btn">
            <span class="btn-icon">🔄</span> 重新加载
          </button>
          <button @click="toggleFullscreen(videoRef3)" class="fullscreen-btn">
            <span class="btn-icon">⛶</span> 全屏
          </button>
        </div>
      </div>
    </div>
    <div class="tip">
      <span class="tip-icon">ℹ️</span> 如无法自动播放，请手动点击播放按钮或尝试重新加载。部分流可能受防盗链/CORS限制。
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import{monitor} from '../api/monitor'
let flvjs

const FLV_URL1 = 'https://pull-flv-l26-admin.douyincdn.com/third/stream-694073653155070438_md.flv?arch_hrchy=h1&exp_hrchy=h1&expire=687f5060&major_anchor_level=common&sign=06bb9861f306dff525b332e2fe05ce5a&t_id=037-20250715164830CA368FDD76D08245218D-MUyjjj&unique_id=stream-694073653155070438_486_flv_md&abr_pts=-800&_session_id=037-20250715164830CA368FDD76D08245218D-MUyjjj.1752569318218.11054&rsi=1'
const FLV_URL2 = 'https://pull-flv-f11.douyincdn.com/media/stream-694063405763658412_hd.flv?arch_hrchy=w1&exp_hrchy=w1&expire=1753176949&major_anchor_level=common&sign=b2a8ec32deff11dfb43da691163781a1&t_id=037-20250715173548D644333ACA6FE6A41639-guvH1q&unique_id=stream-694063405763658412_684_flv_hd&abr_pts=-800&_session_id=037-20250715173548D644333ACA6FE6A41639-guvH1q.1752572152923.74417&rsi=1'
const FLV_URL3 = 'https://pull-flv-t26-admin.douyincdn.com/third/stream-405843131785806650_md.flv?arch_hrchy=h1&exp_hrchy=h1&expire=687f5b75&major_anchor_level=common&sign=d078ab3a49ff466e8e306446e283c3b1&t_id=037-20250715173548D644333ACA6FE6A41639-Li8EGA&unique_id=stream-405843131785806650_826_flv_md&abr_pts=-800&_session_id=037-20250715173548D644333ACA6FE6A41639-Li8EGA.1752572156218.74905&rsi=1'
const addresses=ref([])
// 窗口1
const videoRef1 = ref(null)
const player1 = ref(null)
const loading1 = ref(false)
const statusText1 = ref('未连接')
const statusClass1 = ref('status-disconnected')
const retryCount1 = ref(0)
const maxRetries = 3
let retryTimeout1 = null

// 窗口2
const videoRef2 = ref(null)
const player2 = ref(null)
const loading2 = ref(false)
const statusText2 = ref('未连接')
const statusClass2 = ref('status-disconnected')
const retryCount2 = ref(0)
let retryTimeout2 = null

// 窗口3
const videoRef3 = ref(null)
const player3 = ref(null)
const loading3 = ref(false)
const statusText3 = ref('未连接')
const statusClass3 = ref('status-disconnected')
const retryCount3 = ref(0)
let retryTimeout3 = null

async function initFlv(idx) {
  let videoRef, player, loading, statusText, statusClass, retryCount, retryTimeout, FLV_URL
  if (idx === 0) {
    videoRef = videoRef1; player = player1; loading = loading1; statusText = statusText1; statusClass = statusClass1; retryCount = retryCount1; retryTimeout = retryTimeout1; FLV_URL = addresses.value[0]
  } else if (idx === 1) {
    videoRef = videoRef2; player = player2; loading = loading2; statusText = statusText2; statusClass = statusClass2; retryCount = retryCount2; retryTimeout = retryTimeout2; FLV_URL = addresses.value[1]
  } else {
    videoRef = videoRef3; player = player3; loading = loading3; statusText = statusText3; statusClass = statusClass3; retryCount = retryCount3; retryTimeout = retryTimeout3; FLV_URL = addresses.value[2]
  }
  loading.value = true
  statusText.value = '连接中...'
  statusClass.value = 'status-connecting'
  try {
    if (!flvjs) flvjs = (await import('flv.js')).default
    if (player.value) {
      try { player.value.destroy() } catch(e) {}
      player.value = null
    }
    const video = videoRef.value
    video.pause()
    video.removeAttribute('src')
    video.load()
    await nextTick()
    if (flvjs.isSupported()) {
      const flv = flvjs.createPlayer({ type: 'flv', url: FLV_URL })
      flv.attachMediaElement(video)
      flv.on(flvjs.Events.LOADING_COMPLETE, () => {
        statusText.value = '已连接'
        statusClass.value = 'status-connected'
        retryCount.value = 0
      })
      flv.on(flvjs.Events.ERROR, () => {
        statusText.value = '连接失败'
        statusClass.value = 'status-error'
        if (retryCount.value < maxRetries) {
          retryCount.value++
          statusText.value = `连接失败，重试第${retryCount.value}次...`
          statusClass.value = 'status-retrying'
          if (retryTimeout) clearTimeout(retryTimeout)
          retryTimeout = setTimeout(() => {
            if (idx === 0) reload1()
            else if (idx === 1) reload2()
            else reload3()
          }, 1500 * retryCount.value)
        } else {
          ElMessage.error('FLV流播放失败，可能被防盗链或CORS限制')
        }
      })
      flv.load()
      player.value = flv
      setTimeout(() => {
        video.play().catch(() => {
          ElMessage.warning('如无法自动播放，请手动点击播放按钮')
        })
      }, 300)
    } else {
      statusText.value = '浏览器不支持FLV'
      statusClass.value = 'status-error'
      ElMessage.error('当前浏览器不支持FLV播放')
    }
  } catch (e) {
    statusText.value = '加载失败'
    statusClass.value = 'status-error'
    ElMessage.error('flv.js 加载失败: ' + e.message)
  } finally {
    loading.value = false
  }
}

function reload1() {
  if (retryTimeout1) clearTimeout(retryTimeout1)
  initFlv(0)
}
function reload2() {
  if (retryTimeout2) clearTimeout(retryTimeout2)
  initFlv(1)
}
function reload3() {
  if (retryTimeout3) clearTimeout(retryTimeout3)
  initFlv(2)
}
function toggleFullscreen(refObj) {
  const video = refObj.value
  if (!video) return
  if (!document.fullscreenElement) {
    video.requestFullscreen().catch(err => {
      ElMessage.error(`全屏错误: ${err.message}`)
    })
  } else {
    document.exitFullscreen()
  }
}
async function getUrl(){
  console.log(123);
  debugger

  
  let {data:data} = await monitor()
  console.log(data);
  // console.log(data);
  data.forEach(item=>{
    addresses.value.push(item.deviceAddress)
  })
  addresses.value.forEach(item=>{
    console.log(item);
    
  })
}

onMounted(() => {
  getUrl();
  initFlv(0)
  initFlv(1)
  initFlv(2)
})

onUnmounted(() => {
  if (player1.value) {
    try { player1.value.destroy() } catch(e) {}
    player1.value = null
  }
  if (player2.value) {
    try { player2.value.destroy() } catch(e) {}
    player2.value = null
  }
  if (player3.value) {
    try { player3.value.destroy() } catch(e) {}
    player3.value = null
  }
  if (retryTimeout1) clearTimeout(retryTimeout1)
  if (retryTimeout2) clearTimeout(retryTimeout2)
  if (retryTimeout3) clearTimeout(retryTimeout3)
})
</script>

<style scoped>
.test-flv-page {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #1a2942 0%, #2d4b6e 50%, #3a6491 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.header {
  width: 100%;
  background: linear-gradient(90deg, rgba(26, 41, 66, 0.9) 0%, rgba(42, 72, 114, 0.9) 100%);
  padding: 36px 0 22px 0;
  text-align: center;
  border-bottom: 2px solid rgba(78, 123, 230, 0.3);
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4e7be6, #6a9bff);
  z-index: 1;
}

.header h2 {
  font-size: 2.4rem;
  margin: 0 0 12px 0;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: 600;
}

.header .desc {
  font-size: 1.15rem;
  color: #e0e6ff;
  margin: 0;
  opacity: 0.9;
}

.video-grid {
  display: flex;
  gap: 40px;
  margin-bottom: 32px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  padding: 0 20px;
  max-width: 1400px;
}

.video-box {
  background: rgba(28, 36, 56, 0.85);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 24px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 340px;
  max-width: 400px;
  min-height: 340px;
  border: 1px solid rgba(78, 123, 230, 0.2);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.video-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.video-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4e7be6, #6a9bff);
  border-radius: 18px 18px 0 0;
  opacity: 0.7;
}

.video-title {
  font-size: 1.3rem;
  margin-bottom: 14px;
  color: #fff;
  letter-spacing: 1px;
  font-weight: 500;
  position: relative;
  padding-bottom: 8px;
  width: 100%;
  text-align: center;
}

.video-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: rgba(78, 123, 230, 0.6);
}

.video-container {
  position: relative;
  width: 340px;
  height: 190px;
  background: #151a24;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.video-container:hover {
  transform: scale(1.02);
}

.test-video {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: contain;
  background: #000;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 10;
  backdrop-filter: blur(3px);
}

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(78, 123, 230, 0.3);
  border-radius: 50%;
  border-top-color: #4e7be6;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 12px;
  box-shadow: 0 0 10px rgba(78, 123, 230, 0.5);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.status-info {
  margin-bottom: 12px;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-block;
}

.status-connected {
  color: #4cda65;
  text-shadow: 0 0 8px rgba(76, 218, 101, 0.4);
}

.status-connecting {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
}

.status-error {
  color: #ff5252;
  text-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
}

.status-disconnected {
  color: #aaa;
}

.status-retrying {
  color: #ff9800;
  text-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
}

.btn-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

button {
  background: linear-gradient(135deg, #4e7be6 0%, #3a6491 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

button:hover {
  background: linear-gradient(135deg, #5a8af0 0%, #4575aa 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

button:hover::after {
  left: 100%;
}

.tip {
  margin-top: 20px;
  color: #e0e6ff;
  font-size: 1rem;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px 24px;
  border-radius: 12px;
  max-width: 800px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(78, 123, 230, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tip-icon {
  margin-right: 8px;
  font-size: 1.2rem;
}

.camera-icon {
  margin-right: 6px;
  font-size: 1.1rem;
  opacity: 0.9;
}

.btn-icon {
  margin-right: 6px;
  font-size: 1rem;
}

.reload-btn {
  background: linear-gradient(135deg, #4e7be6 0%, #3a6491 100%);
}

.fullscreen-btn {
  background: linear-gradient(135deg, #3a6491 0%, #2d4b6e 100%);
}

/* 添加悬停效果 */
.video-title {
  transition: color 0.3s ease;
}

.video-box:hover .video-title {
  color: #6a9bff;
}

/* 添加状态点动画 */
.status-connected::before,
.status-playing::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4cda65;
  margin-right: 6px;
  animation: pulse 2s infinite;
}

.status-connecting::before,
.status-buffering::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffcc00;
  margin-right: 6px;
  animation: pulse 1s infinite;
}

.status-error::before,
.status-retrying::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff5252;
  margin-right: 6px;
  animation: pulse 0.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .video-grid {
    gap: 24px;
  }
  
  .video-box {
    min-width: 300px;
    padding: 18px 18px 14px 18px;
  }
  
  .video-container {
    width: 280px;
    height: 160px;
  }
  
  .header h2 {
    font-size: 2rem;
  }
}
</style>